<template>
  <div style="padding: 20px">
    <el-card class="box-card;" shadow="always" style="width: 100%">
      <template #header>
        <div class="card-header" style="text-align: left">
          <span>收货地址</span>
          <el-button class="button" type="text" @click="addAddress"
            >新增</el-button
          >
        </div>
        <el-table :data="addressData" style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="receiverName" label="收货人" width="100">
            <template #default="scope">
              <el-input
                size="medium"
                v-model="scope.row.receiverName"
                v-if="addressEdit[scope.$index]"
              ></el-input>
              <span v-else>{{ scope.row.receiverName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系方式" width="140">
            <template #default="scope">
              <el-input
                size="medium"
                v-model="scope.row.phone"
                v-if="addressEdit[scope.$index]"
              ></el-input>
              <span v-else>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="adpca"
            label="收货地址"
            width="240"
            align="center"
          >
            <template #default="scope">
              <el-cascader
                v-model="scope.row.adpca"
                :options="pcaOptions"
                :props="addressProps"
                placeholder="请选择"
                @change="handleAddressNode"
                filterable
                :disabled="!addressEdit[scope.$index]"
              ></el-cascader>
            </template>
          </el-table-column>
          <el-table-column prop="detailAddress" label="详细地址" width="180">
            <template #default="scope">
              <el-input
                size="medium"
                v-model="scope.row.detailAddress"
                v-if="addressEdit[scope.$index]"
              ></el-input>
              <span v-else>{{ scope.row.detailAddress }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isDefault" label="默认地址" width="100">
            <template #default="scope">
              <div v-if="addressEdit[scope.$index]">
                <el-checkbox
                  v-model="scope.row.isDefault"
                  :true-label="1"
                  :false-label="0"
                  @change="changetest"
                >
                  设为默认
                </el-checkbox>
              </div>
              <div v-else>
                <el-tag
                  v-if="scope.row.isDefault == 1"
                  type="success"
                  size="mini"
                  >默认</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template #default="scope">
              <el-button
                size="small"
                icon="el-icon-edit"
                v-if="!addressEdit[scope.$index]"
                @click="editAddress(scope.$index)"
                >编辑
              </el-button>
              <el-button
                size="small"
                icon="el-icon-check"
                v-else
                @click="saveAddress(scope.$index, scope.row)"
                >保存
              </el-button>
              <el-popconfirm
                confirmButtonText="好的"
                cancelButtonText="不用了"
                icon="el-icon-info"
                title="确定删除该地址？"
                @confirm="deleteAddress(scope.$index, scope.row)"
              >
                <template #reference>
                  <el-button size="small" icon="el-icon-delete"
                    >删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>
  </div>
</template>

<script>
// import { request } from "@/network/request"；
// import {ElMessage} from "element-plus"；
// const pca = require("@/assets/adress/pca-code.json")；

import { provinceAndCityData } from "element-china-area-data";

export default {
  name: "Address",
  data() {
    return {
      addressData: [],
      addressEdit: [],
      addressInput: {
        receiverName: "",
        phone: "",
        adpca: "",
        detailAddress: "",
        isDefault: 0,
      },
      pcaOptions: provinceAndCityData,
      // addressProps: {
      //   label: "name",
      //   children: "children",
      //   value: "code",
      // },
    };
  },
  methods: {
    loadAddressData() {
      request; //此处axios 请求获取数据
      for (let i in this.addressData) {
        this.addressEdit[i] = false; //3.2 初始化布尔数组   false：查看状态（非编辑状态）
      }
    },
    addAddress() {
      this.addressData.push({}); //3.3 新增地址
      this.addressEdit[this.addressData.length - 1] = true;
    },

    editAddress(index) {
      this.addressEdit[index] = !this.addressEdit[index];
    },
    saveAddress(index, value) {
      this.addressEdit[index] = !this.addressEdit[index];
    },
    deleteAddress(index, value) {
      this.addressData.splice(index, 1);
    },
    handleAddressNode(value) {
      //value为数组
      this.addressData.adpca = value[3]; //二级级联地址
    },
    changetest(val) {
      console.log(typeof val);
      console.log(val);
    },
  },
  // mounted() {
  //   this.loadAddressData();
  // },
};
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
